<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <th:block th:include="include :: header('文件管理')"/>
    <th:block th:include="include :: animate_css"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
    <style>
        /** 白色主题 */
        .dropdown-menu {
            position: absolute;
            z-index: 9999999;
            top: 0;
            left: 0;
            border-radius: 3px;
            display: none;
        }

        .dropdown-menu.fixed {
            position: fixed;
        }

        .dropdown-opened {
            display: block;
        }

        .dropdown-menu ul {
            min-width: 100px;
            list-style: none;
            background: #ffffff;
            box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
            overflow: auto;
            padding: 0;
            margin: 0;
            border-radius: 4px;
        }

        .dropdown-menu ul li {
            list-style: none;
            padding: 0;
            margin: 0;
            line-height: 18px;
            border-bottom: 1px solid #e6e6e6;
            cursor: pointer;
        }

        .dropdown-menu ul li:last-child {
            border: none;
        }

        .dropdown-menu ul li > a,
        .dropdown-menu ul li label {
            display: block;
            color: #333;
            text-decoration: none;
            line-height: 18px;
            padding: 10px 15px;
            white-space: nowrap;
            font-size: 14px;
        }

        .dropdown-menu ul li > a:hover,
        .dropdown-menu ul li label:hover {
            background-color: #eeeeee;
        }

        /** 禁用样式 */
        .dropdown-menu ul li > a.disabled,
        .dropdown-menu ul li > a.disabled:hover,
        .dropdown-menu ul li label.disabled,
        .dropdown-menu ul li label.disabled:hover {
            cursor: not-allowed;
            background: none;
            color: #999;
        }

        /** 标题样式 */
        .dropdown-menu ul li.title {
            padding: 5px 15px;
            background: #f6f6f6;
            color: #999;
            font-family: "Roboto", "Open Sans", sans-serif;
            font-size: 12px;
        }

        /** 小箭头 */
        .dropdown-menu .dropdown-anchor {
            border: 7px solid #fff;
        }

        .dropdown-menu .dropdown-anchor,
        .dropdown-menu .dropdown-anchor::after {
            position: absolute;
            content: '';
            display: inline-block;
        }

        .dropdown-menu .dropdown-anchor::after {
            border: 6px solid #fff;
        }

        /** 上边箭头 */
        .dropdown-menu.dropdown-anchor-top-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-right .dropdown-anchor {
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
            top: -14px;
        }

        .dropdown-menu.dropdown-anchor-top-left .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-top-center .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-top-right .dropdown-anchor::after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
            margin-top: -5px;
            margin-left: -6px;
        }

        .dropdown-menu.dropdown-anchor-top-left:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-top-center:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-top-right:not(.dropdown-overlay-trigger) {
            margin-top: 10px;
        }

        .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-left .dropdown-anchor {
            left: 15px;
        }

        .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-center .dropdown-anchor {
            left: calc(50% - 7px)
        }

        .dropdown-menu.dropdown-anchor-top-left.dropdown-anchor-top-right .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-center.dropdown-anchor-top-right .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-top-right.dropdown-anchor-top-right .dropdown-anchor {
            left: calc(100% - 28px);
        }

        /** 下边箭头 */
        .dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor {
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            top: 100%;
        }

        .dropdown-menu.dropdown-anchor-bottom-left .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-bottom-center .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-bottom-right .dropdown-anchor::after {
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            margin-top: -7px;
            margin-left: -6px;
        }

        .dropdown-menu.dropdown-anchor-bottom-left:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-bottom-center:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-bottom-right:not(.dropdown-overlay-trigger) {
            margin-top: -10px;
        }

        .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-left .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-left .dropdown-anchor {
            left: 15px;
        }

        .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-center .dropdown-anchor {
            left: calc(50% - 7px);
        }

        .dropdown-menu.dropdown-anchor-bottom-left.dropdown-anchor-bottom-right .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-center.dropdown-anchor-bottom-right .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-bottom-right.dropdown-anchor-bottom-right .dropdown-anchor {
            left: calc(100% - 28px);
        }

        /** 左边箭头 */
        .dropdown-menu.dropdown-anchor-left-top:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-left-center:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-left-bottom:not(.dropdown-overlay-trigger) {
            margin-left: 10px;
        }

        .dropdown-menu.dropdown-anchor-left-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            left: -14px;
        }

        .dropdown-menu.dropdown-anchor-left-top .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-left-center .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-left-bottom .dropdown-anchor::after {
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            margin-left: -5px;
            margin-top: -6px;
        }

        .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-top .dropdown-anchor {
            top: 11px;
        }

        .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-center .dropdown-anchor {
            top: calc(50% - 7px);
        }

        .dropdown-menu.dropdown-anchor-left-top.dropdown-anchor-left-bottom .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-center.dropdown-anchor-left-bottom .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-left-bottom.dropdown-anchor-left-bottom .dropdown-anchor {
            top: calc(100% - 26px);
        }

        /** 右边箭头 */
        .dropdown-menu.dropdown-anchor-right-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor {
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            left: 100%;
        }

        .dropdown-menu.dropdown-anchor-right-top .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-right-center .dropdown-anchor::after,
        .dropdown-menu.dropdown-anchor-right-bottom .dropdown-anchor::after {
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            margin-left: -7px;
            margin-top: -6px;
        }

        .dropdown-menu.dropdown-anchor-right-top:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-right-center:not(.dropdown-overlay-trigger),
        .dropdown-menu.dropdown-anchor-right-bottom:not(.dropdown-overlay-trigger) {
            margin-left: -10px;
        }

        .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-top .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-top .dropdown-anchor {
            top: 11px;
        }

        .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-center .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-center .dropdown-anchor {
            top: calc(50% - 7px);
        }

        .dropdown-menu.dropdown-anchor-right-top.dropdown-anchor-right-bottom .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-center.dropdown-anchor-right-bottom .dropdown-anchor,
        .dropdown-menu.dropdown-anchor-right-bottom.dropdown-anchor-right-bottom .dropdown-anchor {
            top: calc(100% - 26px);
        }
        .file-name{
            overflow: hidden;
            margin: 5px;
        }
        .file-name span{
            white-space: nowrap;
            
        }
    </style>

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-lg-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <h5>操作</h5>
                            <div class="hr-line-dashed"></div>
                            <button class="btn btn-primary btn-block text-center" type="btn" data-toggle="modal"
                                    data-target="#uploadModal">上传文件
                            </button>
                            <div class="modal inmodal fade" id="uploadModal" tabindex="-1" role="dialog"
                                 aria-hidden="true">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal"><span
                                                    aria-hidden="true">&times;</span><span
                                                    class="sr-only">Close</span>
                                            </button>
                                            <h4 class="modal-title">文件上传</h4>
                                        </div>
                                        <div class="modal-body">
                                            <input type="file" multiple="true" id="filePath" name="file"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="btn btn-primary btn-block" id="configBtn">储存配置</button>
                            <button class="btn btn-primary btn-block" id="refreshBtn">刷新</button>
                            <div class="hr-line-dashed"></div>
                            <h5>储存选择</h5>
                            <div class="folder-list" style="padding: 0"
                                 th:with="type=${@dict.getType('oly_oss_location')}">
                                <div class="radio-box" th:each="dict : ${type}">
                                    <input type="radio" name="ossLocation" th:value="${dict.dictValue}">
                                    <label th:text="${dict.dictLabel}"></label>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <h5>文件类型</h5>
                            <ul class="folder-list" id="fileTypeList" style="padding: 0"
                                th:with="type=${@dict.getType('oly_oss_type')}">

                                <li th:each="dict : ${type}" th:attr="data-value=${dict.dictValue}"><a
                                        href="javascript:void(0)"><i class="fa fa-folder"></i> <span
                                        th:text="${dict.dictLabel}"></span></a></li>

                            </ul>

                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12" id="file_list">

                    </div>


                </div>
            </div>
            <div class="col-lg-4 col-lg-offset-4" aria-label="...">
                <ul class="pager">
                    <li id="prePage" class="previous"><a href="javascript:void(0)"><span
                            aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li id="nextPage" class="next"><a href="javascript:void(0)">下一页 <span
                            aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </div>
        </div>

    </div>
</div>
<!-- 下拉菜单 -->
<div class="dropdown-menu dropdown-anchor-top-left" id="dropdownFile">
    <div class="dropdown-anchor"></div>
    <ul>
        <li><a id="open"><i class="layui-icon layui-icon-file"></i>&emsp;查看&emsp;</a></li>
        <li><a id="copy"><i class="layui-icon layui-icon-release"></i>&emsp;复制&emsp;</a></li>
        <li>
            <a id="del" style="color: red !important;">
                <i class="layui-icon layui-icon-delete" style="font-size: 19px;"></i>&nbsp;&nbsp;&nbsp;删除&emsp;
            </a>
        </li>
    </ul>
</div>
<!-- 渲染模板 -->
<script id="fileTpl" type="text/html">
    {{# if(d.length<=0){ }}
    <span>没找到任何文件！</span>
    {{# } else { layui.each(d.rows, function(index, item){ }}
    <div class="file-box" data-dir="{{item.fileType}}" data-key="{{item.fk}}" data-url="{{item.domain}}{{item.fk}}"
         data-name="{{item.fileName}}">
        <div class="file">
            <a href="javascript:void(0)">
                <span class="corner"></span>
                <div class="image">
                    {{# if(item.fileType=='image'){ }}
                    <img alt="{{item.fileName}}" class="img-responsive" src="{{item.domain}}{{item.thumbKey}}">
                </div>
                <div class="file-name">
                   <span> {{item.fileName}}</span>
                    <br>
                    <small>添加时间:{{item.createTime}}</small>
                </div>
            </a>
        </div>
    </div>
    </div>
    {{# }else{ }}
    <img alt="{{item.fileName}}" class="img-responsive" src="{{d.ctx}}images/fti/{{item.fileType}}.png">

    </div>
    <div class="file-name">
        <span> {{item.fileName}}</span>
        <br>
        <small>添加时间:{{item.createTime}}</small>
    </div>
    </div>
    </a>
    </div>
    </div>
    {{#  } });} }}
</script>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<th:block th:include="include :: oly_clipboard_js"/>
<script th:inlone="javascript">
    var prefix = ctx + "oly/oss";
    layui.use(['element', 'laytpl'], function () {

        var element = layui.element;
        var laytpl = layui.laytpl;

        var pageModel = {
            fileHeard: "",
            fileType: "",
            param: {
                startTimen: "",
                endTime: ""
            },
            total: 1,
            totalPage: 1,
            pageSize: 20,
            pageNum: 1
        }

        //鼠标经过动画
        function animationHover(element, animation) {
            element = $(element);
            element.hover(
                function () {
                    element.addClass('animated ' + animation);
                },
                function () {
                    //wait for animation to finish before removing classes
                    window.setTimeout(function () {
                        element.removeClass('animated ' + animation);
                    }, 2000);
                });
        }

        $("#filePath").fileinput({
            language: 'zh', //设置语言
            uploadUrl: prefix + "/upload", //上传的地址
            dropZoneEnabled: true,//是否显示拖拽区域
            allowedFileExtensions: ['jpg', 'png', 'docx'],//接收的文件后缀
        });

        $("#filePath").on("fileuploaded", function (event, data, previewId, index) {
            renderList(pageModel);
        });

        // 渲染文件列表
        function renderList(olyoss) {
            layer.load(2);
            //获取文件列表
            $.get(prefix + '/list', olyoss, function (res) {
                layer.closeAll('loading');
                if (res.code == 0) {
                    res.ctx = ctx;
                    pageModel.total = res.total;
                    if (res.total % pageModel.pageSize == 0) {
                        pageModel.totalPage = res.total / pageModel.pageSize;
                    } else {
                        pageModel.totalPage = res.total / pageModel.pageSize + 1;
                    }

                    //小于一页
                    if (pageModel.pageSize >= res.total) {
                        $("#nextPage").addClass('disabled');
                        $("#prePage").addClass('disabled');
                    }
                    //最后一页
                    else if (pageModel.pageNum == pageModel.totalPage) {
                        $("#nextPage").addClass('disabled');
                    }
                    //第一页
                    else if (pageModel.pageNum == 1) {
                        $("#prePage").addClass('disabled');
                    } else {
                        $("#prePage").removeClass('disabled');
                        $("#nextPage").removeClass('disabled');
                    }


                    laytpl(fileTpl.innerHTML).render(res, function (html) {

                        document.getElementById('file_list').innerHTML = html;
                        $('.file-box').each(function () {
                            animationHover(this, 'pulse');
                        });
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            });
        }

        //初始化文件列表
        renderList(pageModel);

        $("#prePage").click(function (e) {
            if (pageModel.pageNum == 1) {

            } else {
                $("#nextPage").removeClass('disabled');
                pageModel.pageNum--;
                renderList(pageModel);
            }
        });

        $("#nextPage").click(function (e) {
            if ((pageModel.pageNum == pageModel.totalPage) || (pageModel.total <= pageModel.pageSize)) {

            } else {
                pageModel.pageNum++;
                renderList(pageModel);
            }
        });


        function submitHandler() {
            if ($.validate.form()) {
                uploadFile();
            }
        }


        var mUrl, mKey;
        $('body').on('click', '.file-box', function (e) {
            mUrl = $(this).data('url');
            mKey = $(this).data('key');
            $('#copy').attr('data-clipboard-text', mUrl);
            var $target = $(this).find('.file');
            $('#dropdownFile').css({
                'top': $target.offset().top + 90,
                'left': $target.offset().left + 25
            });
            $('#dropdownFile').addClass('dropdown-opened');
            if (e !== void 0) {
                e.preventDefault();
                e.stopPropagation();
            }

        });
        //获取储存位置
        $('input[value="[[${@config.getKey("oly.oss.used")}]]"]').iCheck('check');
        //选择储存位置
        $('input[name="ossLocation"]').on('ifChecked', function (obj) {
            $.operate.saveTab(ctx + "system/config/updateByKey", {"oly.oss.used": $(this).val()}, function () {
                location.reload();
            });

        })
        $("#fileTypeList li").click(function () {
            $('#fileTypeList li i').css({
                'color': '#3d4d5d'
            });
            pageModel.fileType = $(this).data('value');
            renderList(pageModel);
            $(this).find("i").css({
                'color': '#1ab394'
            });
        });


        // 点击空白隐藏下拉框
        $('html').off('click.dropdown').on('click.dropdown', function () {
            $('#copy').attr('data-clipboard-text', '');
            $('#dropdownFile').removeClass('dropdown-opened');
        });

        // 打开
        $('#open').click(function () {
            window.open(mUrl);
        });
        // 删除
        $('#del').click(function () {
            layer.confirm('确定要删除此文件吗？', function () {
                layer.load(2);
                $.get(prefix + '/delete' + mKey, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        renderList(pageModel);
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                });
            });
        });

        // 复制
        var clipboard = new ClipboardJS('#copy');
        clipboard.on('success', function (e) {
            e.clearSelection();
            layer.msg('文件地址已复制', {icon: 1});
        });
        clipboard.on('error', function (e) {
            layer.msg('复制失败，请手动复制', {icon: 2});
        });

        // 配置编辑弹窗
        $('#configBtn').click(function () {
            $.modal.open('储存配置', prefix + '/config', 600, 550)
        });

        // 刷新
        $('#refreshBtn').click(function () {
            layer.msg('列表已经刷新!', {icon: 1});
            renderList(pageModel);
        });


        // 弹窗模式
        $('#btnDilaog').click(function () {
            layer.open({
                type: 2,
                title: '选择文件',
                content: prefix + '/alert?multi=true&a=3',
                area: ['600px', '420px'],
                offset: '50px',
                shade: .1,
                fixed: false,
                resize: false,
                end: function () {
                    if (typeof (mFsUrls) != "undefined" && mFsUrls.length > 0) {
                        layer.msg('你选择了：' + JSON.stringify(mFsUrls), {icon: 1});
                        mFsUrls = undefined;
                    }
                }
            });
        });

        //
        $('#aMY').on('mouseenter', function () {
            layer.tips('前往码云查看', this, {tips: [1, '#333333'], time: -1});
        }).on('mouseleave', function () {
            layer.closeAll('tips');
        });
    });
</script>

</body>

</html>
